<template>
  <div>
    <div id="pay-top">
        <div class="container">
            <div id="J_miniHeaderTitle">支付订单</div>
        </div>
    </div>

    <div id="pay-middle">
        <div id="order-simple" class="clearfix">
            <div class="iconfont">√</div>
            <div id="pay-success">
                <div id="success-left">
                    <div id="success-info">订单提交成功！去付款咯～</div>
                    <div id="pay-time">请在<span>0 小时 14 分</span>内完成支付, 超时后将取消订单</div>
                </div>
                <div id="success-right">
                    <div id="pay-price">应付总额：<span>{{this.OrderTotalPrice}}元</span></div>
                    <div id="order-button"><a href="javascript:;" @click="showInfor">订单详情</a></div>
                </div>
            </div>
        </div>
        <div id="order-infor">
            <div>订单号：<span>{{this.OrderSn}}</span></div>
            <div>商品名称：{{this.SeckillName}}</div>
        </div>
    </div>
    <div id="pay-way">
        <div id="way-title">选择以下支付方式付款</div>
        <div id="zfpt">支付平台</div>
        <div id="payway-list">
            <div id="pay-wx"><img src="/imgs/wx.jpg" class="payment" data-PaymentType="WxNativePay"></div>
            <div><img src="/imgs/yl.jpg"></div>
            <div><img src="/imgs/zfb.jpg" class="payment" data-PaymentType="AliPagePay"></div>
        </div>
        <div id="qrcode"></div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import QRCode from 'qrcodejs2';
import baseUrl from "../evn";
export default {
  name: 'seckillorderpay',
  components: {
  },
  data(){
    return {
        "OrderId":this.$route.params.OrderId,
        "OrderSn":this.$route.params.OrderSn,
        "OrderTotalPrice":this.$route.params.OrderTotalPrice,
        "UserId":this.$route.params.UserId,
        "ProductId":this.$route.params.ProductId,
        "SeckillName":this.$route.params.SeckillName
    }
  },
  mounted() {
    this.createPay();
  },
  methods: {
    createPay(){
        var self = this;
       // 1、支付
        $(".payment").click(function () {
            var PaymentType = $(this).attr("data-PaymentType");
            var paymentUrl ="http://localhost:5003/api/Payment/";
        // var paymentUrl = "http://47.104.70.197:5006/api/Payment/";
        // var paymentUrl = "http://118.190.162.238:30014/api/Payment/"
            $.ajax({
                method: "POST",
                url: paymentUrl,
                dataType: 'JSON',
                data: {
                    "OrderId": self.OrderId,
                    "OrderSn": self.OrderSn,
                    "OrderTotalPrice": self.OrderTotalPrice,
                    "UserId": self.UserId,
                    "PaymentType": PaymentType,
                    "ProductName": self.SeckillName
                },
                success: function (result) {
                    if (result.ErrorNo == "0") {
                        $("#qrcode").html("");
                        if (PaymentType == "WxNativePay") {
                            console.log(result)
                            // 1、创建微信支付二维码 // 把微信支付weixin://wxpay/bizpayurl?pr=9IzAZwkzz
                            var qrcode = new QRCode("qrcode", {
                                text: result.ResultDic.PayResult,
                                width: 128,
                                height: 128,
                                colorDark: "#000000",
                                colorLight: "#ffffff",
                                correctLevel: QRCode.CorrectLevel.H
                            });
                        } else if (PaymentType == "AliPagePay") {
                            $("#qrcode").html(result.ResultDic.PayResult);
                        }

                    } else {
                        alert(result.ErrorInfo);
                    }
                }
            })
        })
    },
    showInfor() {
        $("#order-infor").slideToggle(100);
    }
  }
};
</script>

<style>
.container {
    width: 1226px;
    margin: 0px auto;
}

#pay-top {
    width: 100%;
    height: 102px;
    border-bottom: 2px solid #ff6700;
    background: #fff;
}

#J_miniHeaderTitle {
    width: 112px;
    height: 48px;
    float: left;
    margin-top: 26px;
    font-size: 28px;
}

#pay-middle {
    width: 1226px;
    margin: 0px auto;
    margin-top: 30px;
    background: #fff;
}

.iconfont {
    width: 84px;
    height: 84px;
    border-radius: 100%;
    border: 2px solid #83c44e;
    text-align: center;
    line-height: 84px;
    font-size: 50px;
    font-weight: 300;
    color: #83c44e;
    margin-top: 30px;
    margin-left: 30px;
    float: left;
}

#pay-success {
    float: left;
    width: 995px;
    height: 112px;
    margin-left: 30px;
    margin-top: 40px;
}

#success-left {
    float: left;
}

#success-right {
    float: right;
}

#success-info {
    font-size: 24px;
    margin-bottom: 10px;
}

#pay-time span {
    color: #ff6700;
}

#pay-price {
    margin-bottom: 10px;
}

    #pay-price span {
        color: #ff6700;
        font-size: 20px;
    }

#order-button a {
    text-decoration: none;
    color: #000;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

#order-infor {
    margin-left: 150px;
    display: none;
    padding-bottom: 10px;
    border-top: solid 1px#e0e0e0;
    padding-top: 10px;
}

    #order-infor div {
        margin-bottom: 10px;
    }

    #order-infor span {
        color: #ff6700;
    }

#pay-way {
    width: 1226px;
    margin: 0px auto;
    margin-top: 30px;
    background: #fff;
    height: 400px;
}

#way-title {
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    margin-left: 30px;
    border-bottom: solid 1px#e0e0e0;
}

#payway-list div {
    float: left;
    margin-right: 10px;
    border: solid 1px #e0e0e0;
    cursor: pointer;
}

    #payway-list div:hover {
        border: solid 1px #ff6700;
    }

#zfpt {
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    margin-left: 30px;
}

#pay-wx {
    margin-left: 30px;
}
</style>